<template>
    <div id="personalInformationEditing"> 
        <div>
            <van-config-provider :theme-vars="themeVars">
            <van-nav-bar
            title="信息编辑"
            left-text="取消"
            right-text="保存"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            style="background-color: rgba(234, 233, 229);"
            />
            </van-config-provider>
        </div>
        <div style="width:100%;height: 230px;text-align: center;">
            <img :src="total.imgData" alt="" style="width:120px;height:120px;border-radius: 75px;box-shadow:0 0 10px #333;margin-top: 40px;" @click="dj">
            <div style="margin-top: 20px;color: rgba(193, 171, 152);">
                <span>更改头像</span>
            </div>
        </div>
        <div class="van-hairline--bottom">
            <van-field v-model="total.nameData" label="昵称" />
        </div>
        <div class="van-hairline--bottom">
            <van-field label="会员ID" model-value="123456789" readonly/>
        </div>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '100%'}">
            <div style="background-color: rgba(0, 0, 0);width:100%;height:850px">
                <van-nav-bar left-text="所有照片及视频"  @click-left="fH" left-arrow style="background-color:rgba(0,0,0)">
                <template #right>
                        <van-button type="default" style="height:30px;width:80px" color="#c1ab96" @click="wC">完成</van-button>
                </template>
                </van-nav-bar>
                <div style="width:100%;display: flex;flex-wrap: wrap;flex-direction: row;">
                    <div v-for="(item,index) in imgSL" :key="index" @click="xZ(item)">
                        <img :src="item" alt="" style="width:110px;height:110px;margin-left: 10px;">
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import {onMounted, ref,onBeforeMount} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()

let total:any = ref({})
onMounted(()=>{
    total.value = JSON.parse(route.query.data)
})
let show = ref(false)
let dj = ()=>{
    show.value = true
}

let onClickLeft = ()=>{
        //清空存储信息
    history.back();//返回设置主界面
}
let onClickRight = ()=>{
        //向后台发送更改数据
    onClickLeft()//并调用取消方法
}
let fH = ()=>{
    show.value = false
    xZImg.value = ''
}
let wC = ()=>{
    show.value = false
    total.value.imgData = xZImg.value
    xZImg.value = ''
}
let xZImg = ref()
let xZ = (img:any)=>{
    xZImg.value = img
}
let imgSL = ref(['https://img2.baidu.com/it/u=1309682942,3174268086&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=268f592c8e199ac0f79a3ce9a505e64d','https://img2.baidu.com/it/u=1309682942,3174268086&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=268f592c8e199ac0f79a3ce9a505e64d','https://img2.baidu.com/it/u=1309682942,3174268086&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665853200&t=268f592c8e199ac0f79a3ce9a505e64d'])
const themeVars = {
    fontWeightBold:'bolder',
    navBarTitleFontSize:'20px',
}
</script>
<style scoped>
    
</style>